<template>
  <div class="main">
    <div class="img">
      <img :src="img" alt="" />
    </div>
    <h1>猜你喜欢</h1>
    <ul>
      <li>综合排序</li>
      <li @click="distance">距离最近</li>
      <li @click="Sales">销量最高</li>
      <li>筛选！</li>
    </ul>
    <ol>
      <li>年货节热卖</li>
      <li>津贴联盟</li>
      <li>满减优惠</li>
      <li>品质联盟</li>
    </ol>
    <div
      @click="Jump(item.mtWmPoiId)"
      class="box"
      v-for="(item, index) in render"
      :key="index"
    >
      <div class="img">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="moddle">
        <h2>{{ item.name }}</h2>
        <div class="score">
          <span class="cheng">4.3</span>
          <span>{{ item.monthSalesTip }}</span>
        </div>
        <div class="song">
          <div class="zuo">
            起送￥20 远距离<span>{{ item.shippingFeeTip }}</span
            ><span class="add">￥6</span>
          </div>
          <div class="you">
            {{ item.deliveryTimeTip }} <span>{{ item.distance }}</span>
          </div>
        </div>
        <div class="introduce">
          <span v-for="(good, index) in item.discounts2" :key="index">{{
            good.info
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { waimai_index } from "../../api/index";
import img from "../../assets/pic1.png";
export default {
  data() {
    return {
      img: img,
      render: null,
    };
  },

  mounted() {
    // 挂载完成时，发送请求
    waimai_index().then((res) => {
      if (res.data.code == 200) {
        this.render = res.data.list;
        // this.b=
      }
    });
  },
  // 定义方法，实现点击距离，销量，实现不同得排版
  methods: {
    distance() {
      this.render.sort(function (a, b) {
        return parseFloat(a.distance) - parseFloat(b.distance);
      });
    },
    Sales() {
      this.render.sort(function (a, b) {
        return b.monthSalesTip.slice(2) * 1 - a.monthSalesTip.slice(2) * 1;
      });
    },
    Jump(id) {
      this.$router.push("/Commodity/" + id);
      console.log(1111);
    },
  },
};
</script>

<style lang="css" scoped>
.main h1 {
  font-size: 18px;
  /* padding: 10px; */
}
.main ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  list-style: none;
  text-align: center;
}
.main .img {
  margin: 10px;
}
.main .img img {
  width: 100%;
  border-radius: 5px;
}
.main ol {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  list-style: none;
  text-align: center;
  font-size: 14px;
}
.main ol li {
  width: 23%;
  height: 25px;
  border-radius: 5px;
  line-height: 25px;
  background-color: rgb(232, 226, 226);
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.box .img {
  width: 30%;
}
.box .img img {
  width: 100%;
}
.moddle {
  width: 70%;
}
.moddle h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
.moddle .score {
  font-size: 12px;
  color: rgb(127, 127, 127);
  line-height: 30px;
}
.moddle .score .cheng {
  color: rgb(253, 93, 34);
}
.moddle .song {
  font-size: 12px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(127, 127, 127);
}
.moddle .song .zuo span.add {
  font-size: 12px;
  text-decoration: line-through;
  color: #ccc;
}
.moddle .introduce span {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 12px;
  padding: 2px;
  margin-right: 5px;
  background-color: rgb(251, 229, 191);
  color: rgb(251, 106, 49);
}
</style>